<template>
  <view>
    <u-top-tips ref="uTips"></u-top-tips>
    <u-form :model="form" ref="uForm" style="margin: 0 20rpx;">
      <u-form-item label-width="145"  label="*邮箱" prop="oldPwd">
        <u-input  v-model="form.email" />
        <view class="t-c" @click="validate">
          {{ tips }}
          <u-verification-code :keep-running="true" :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"
                               :startText="startText" :changeText="changeText" :endText="endText"></u-verification-code>
        </view>
      </u-form-item>
      <u-form-item label-width="145"  label="*验证码" prop="oldPwd"><u-input  v-model="form.code" /></u-form-item>
      <u-form-item label-width="145"  label="*新密码" prop="newPwd"><u-input type="password" v-model="form.newPwd" /></u-form-item>
      <u-form-item label-width="145"  label="*确认密码" prop="confirmPwd"><u-input type="password" v-model="form.confirmPwd" /></u-form-item>
    </u-form>
    <u-button @click="submit" type="primary">提交</u-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        email: '',
        code: '',
        newPwd: '',
        confirmPwd: ''
      },
      tips: '',
      seconds: 60,
      refCode: null,
      startText: '获取验证码',
      changeText: 'X秒',
      endText: '重新获取',
      rules: {
        confirmPwd:[
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              return value === this.form.newPwd;
            },
            required: true,
            message: '两次密码不一致',
            trigger: 'blur'
          }
        ],
        newPwd: [
          {
            required: true,
            message: '新密码不能为空',
            trigger: 'blur'
          }
        ],
        code: [
          {
            validator: (rule,value,callback) => {
              return this.$u.test.code(value);
            },
            required: true,
            message: '验证码不合法',
            trigger: 'blur'
          }
        ],
        email:[
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // this.$u.test.mobile()就是返回true或者false的
              return this.$u.test.email(value)
            },
            required: true,
            message: '邮箱不合法',
            trigger: 'blur'
          }
        ],
      },
    };
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods:{
    validate() {
      if (!this.$u.test.email(this.form.email)) {
        this.$u.toast('邮箱格式不合法！');
        return;
      }
      if (this.$refs.uCode.canGetCode) {
        this.$u.api.getUserOne(this.form.email).then(resp => {
          if (!resp.data) {
            this.$refs.uTips.show({
              title: '该邮箱未注册，请先注册！',
              type: 'info',
              duration: '3000'
            })

          } else {
            this.$u.api.senderEmailCode(this.form.email).then(resp => {
              // 通知验证码组件内部开始倒计时
              this.$refs.uCode.start();
            })
          }
        })
      } else {
        this.$u.toast('请等待倒计时结束！');
      }
    },
    codeChange(text) {
      this.tips = text;
    },
    start() {
      this.$u.toast('倒计时开始！');
    },
    end() {
      this.$u.toast('倒计时结束！');
    },
    submit(){
      this.$refs.uForm.validate(valid => {
        if (valid) {
          this.$u.api.forgetPwd(this.form).then(res => {
            if (res.code === 200){
              this.$u.toast("重置成功！");
              // #ifndef H5
              uni.navigateBack({
                delta: 1
              });
              // #endif
              // #ifdef H5
              history.back()
              // #endif
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">

</style>
